<template>
	<view>
		<!-- <up-navbar autoBack bgColor="#c7dff1" placeholder title="新增绑定"></up-navbar> -->
		<view class="my-bg pad-24">
			<view class="bg-white pad-30 mar-bottom-30 font-28 radius20">
					
				<up-input type="number" @blur="hanldeSearch" @custom="hanldeSearch" clearable placeholderClass="input-style"
					placeholder="输入水表编号，如：00001" v-model="waterMeterCode"></up-input>
					
					
				<view v-if="info !=''" class="bg-white pad-left-right-24 pad-top-bottom-30 radius20 mar-top-20">
					<view class="title">基本信息</view>
					<view class="font-28 color-text mar-top-24">户主：{{info.holder_username}}</view>
					<view class="font-28 color-text mar-top-16">水表编号：{{info.code}}</view>
					<view class="font-28 color-text mar-top-24">地址：{{info.address}}</view>
					<view class="font-28 color-text mar-top-16">上次抄表读数：{{info.water_number}}</view>
					<view class="mar-top-16">
						<up-input :customStyle="{border:'1rpx solid #D9D9D9'}" placeholder="请输入备注" border="surround"
							v-model="userRemark"></up-input>
					</view>
				</view>
			</view>
			<view class="button-bottom" @click="handleBinding">
				<view class="button-style centerXY">
					<view class="mar-left-10">确认绑定</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import { ref, reactive } from 'vue';
	import { waterDetail } from '@/api/index.js';
	import { userMeterAdd } from '@/api/user.js';

	// 水表编号
	const waterMeterCode = ref('');

	// 搜索回调
	let timer = null;
	const hanldeSearch = (e) => {
		if (timer) {
			clearTimeout(timer)
		}
		timer = setTimeout(() => {
			getWaterDetail(e);
			timer = null
		}, 1000)
	};

	// 查询水表详情
	const info = ref('');
	const getWaterDetail = (e) => {
		waterDetail({ water_meter_code: e }).then(res => {
			if (res.code == 200) {
				info.value = res.data.info;
			}
		})
	}

	// 绑定水表
	const userRemark = ref('');
	const handleBinding = () => {
		userMeterAdd({
			water_meter_id: info.value.id,
			user_remark: userRemark.value
		}).then(res => {
			if (res.code == 200) {
				uni.$u.toast('添加成功');

				setTimeout(() => {
					uni.navigateBack();
				},1000)
			}
		})
	}
</script>

<style scoped lang="scss">
	.my-bg {
		background-image: url('https://file.jitoushuizhan.cn/upload/2025/02/03/111ba83702f882f08421c066eb85f6f6.png');
		background-size: 100% 489rpx;
		background-color: #F7F8FA;
		background-repeat: no-repeat;
		min-height: 100vh;
		box-sizing: border-box;
	}

	.button-bottom {
		width: 100%;

		.button-style {
			padding: 20rpx 0;
			text-align: center;
		}
	}
</style>